import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { useState } from 'react';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';


// 模拟媒体资料图片数据
const mediaImages = [
  {
    id: 1,
    title: "豆豆Pay东京总部开业仪式",
    category: "公司活动",
    date: "2025-01-05",
    thumbnailUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=company%20opening%20ceremony%2C%20Tokyo%20headquarters%2C%20ribbon%20cutting&sign=2c293c5a9d216547b91409da88974d4b",
    largeUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=company%20opening%20ceremony%2C%20Tokyo%20headquarters%2C%20ribbon%20cutting&sign=2c293c5a9d216547b91409da88974d4b"
  },
  {
    id: 2,
    title: "豆豆Pay产品发布会",
    category: "产品发布",
    date: "2025-03-10",
    thumbnailUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=product%20launch%20event%2C%20payment%20technology%2C%20stage%20presentation&sign=01bcd24d1951096f7dd3d43bb6921675",
    largeUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=product%20launch%20event%2C%20payment%20technology%2C%20stage%20presentation&sign=01bcd24d1951096f7dd3d43bb6921675"
  },
  {
    id: 3,
    title: "豆豆Pay团队合影",
    category: "公司风采",
    date: "2025-02-18",
    thumbnailUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=company%20team%20photo%2C%20diverse%20employees%2C%20modern%20office&sign=9343bcf6eeae77747b166db95d2a4a8f",
    largeUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=company%20team%20photo%2C%20diverse%20employees%2C%20modern%20office&sign=9343bcf6eeae77747b166db95d2a4a8f"
  },
  {
    id: 4,
    title: "豆豆Pay金融科技峰会展位",
    category: "展会活动",
    date: "2025-04-20",
    thumbnailUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fintech%20exhibition%20booth%2C%20payment%20technology%2C%20business%20event&sign=9fe83cf3c1dc832e571fe58ad4eddddb",
    largeUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fintech%20exhibition%20booth%2C%20payment%20technology%2C%20business%20event&sign=9fe83cf3c1dc832e571fe58ad4eddddb"
  },
  {
    id: 5,
    title: "豆豆Pay荣获金融科技创新奖",
    category: "荣誉奖项",
    date: "2025-02-18",
    thumbnailUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fintech%20award%20ceremony%2C%20trophy%2C%20award%20presentation&sign=12e8d72b6e41a3731c3acd7468734206",
    largeUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fintech%20award%20ceremony%2C%20trophy%2C%20award%20presentation&sign=12e8d72b6e41a3731c3acd7468734206"
  },
  {
    id: 6,
    title: "豆豆Pay与三菱UFJ银行合作签约仪式",
    category: "合作签约",
    date: "2025-06-18",
    thumbnailUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=partnership%20signing%20ceremony%2C%20bank%20collaboration%2C%20executives%20signing%20documents&sign=d68873765f53517bb9038b5a68eb7497",
    largeUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=partnership%20signing%20ceremony%2C%20bank%20collaboration%2C%20executives%20signing%20documents&sign=d68873765f53517bb9038b5a68eb7497"
  },
  {
    id: 7,
    title: "豆豆Pay产品界面展示",
    category: "产品图片",
    date: "2025-03-10",
    thumbnailUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=payment%20app%20interface%2C%20mobile%20payment%20screen%2C%20fintech%20UI&sign=0a7539a820b2cec5090f35d24daeeed9",
    largeUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=payment%20app%20interface%2C%20mobile%20payment%20screen%2C%20fintech%20UI&sign=0a7539a820b2cec5090f35d24daeeed9"
  },
  {
    id: 8,
    title: "豆豆Pay CEO在东京金融论坛演讲",
    category: "行业活动",
    date: "2025-05-28",
    thumbnailUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=CEO%20giving%20speech%2C%20Tokyo%20financial%20forum%2C%20conference%20hall&sign=93aee0b19184200ae738792632e74492",
    largeUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=CEO%20giving%20speech%2C%20Tokyo%20financial%20forum%2C%20conference%20hall&sign=93aee0b19184200ae738792632e74492"
  }
];

// 图片分类
const categories = [
  { id: 'all', name: '全部图片' },
  { id: 'company', name: '公司活动' },
  { id: 'product', name: '产品图片' },
  { id: 'event', name: '展会活动' },
  { id: 'award', name: '荣誉奖项' },
  { id: '合作', name: '合作签约' }
];

export default function MediaLibrary() {
  const { t, i18n } = useTranslation();
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [selectedImage, setSelectedImage] = useState(null);
  
  // 根据选择的分类筛选图片
  const filteredImages = selectedCategory === 'all' 
    ? mediaImages 
    : mediaImages.filter(image => image.category === selectedCategory);
  
  // 打开图片查看器
  const openImageViewer = (image) => {
    setSelectedImage(image);
    document.body.style.overflow = 'hidden';
  };
  
  // 关闭图片查看器
  const closeImageViewer = () => {
    setSelectedImage(null);
    document.body.style.overflow = '';
  };
  
  return (
   <div className="min-h-screen flex flex-col bg-white">
      <Header />
      <Helmet>
        <title>{t('header.mediaResources')} - {t('seo.title')}</title>
        <meta name="description" content={t('news.mediaLibraryDesc')} />
        <meta property="og:title" content={`${t('header.mediaResources')} - ${t('seo.title')}`} />
        <meta property="og:locale" content={i18n.language === 'ja' ? 'ja_JP' : 'zh_CN'} />
      </Helmet>
      

      <main className="flex-grow">
         {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-blue-50 to-indigo-900">
           <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-white mb-6">
                {t('header.mediaResources')}
              </h1>
              <div className="w-20 h-1 bg-blue-400 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-blue-100 leading-relaxed">
                {t('news.mediaLibraryDesc')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 媒体资料库 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="max-w-6xl mx-auto">              
              {/* 图片分类 */}
              <div className="mb-12 overflow-x-auto pb-2">
                <div className="flex space-x-3 min-w-max">
                  {categories.map((category) => (
                    <button 
                      key={category.id}
                      onClick={() => setSelectedCategory(category.id === 'all' ? 'all' : category.name)}
                      className={`px-5 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap ${
                        selectedCategory === (category.id === 'all' ? 'all' : category.name)
                          ? 'bg-gray-900 text-white'
                          : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
                      }`}
                    >
                      {category.name}
                    </button>
                  ))}
                </div>
              </div>
              
              {/* 图片网格 */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {filteredImages.map((image) => (
                  <motion.div
                    key={image.id}
                    initial={{ opacity: 0, scale: 0.9 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.5, delay: (image.id - 1) * 0.03 }}
                    viewport={{ once: true }}
                    className="group relative rounded-xl overflow-hidden shadow-md cursor-pointer"
                    onClick={() => openImageViewer(image)}
                  >
                    <div className="aspect-video overflow-hidden">
                      <img 
                        src={image.thumbnailUrl} 
                        alt={image.title} 
                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                      />
                    </div>
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
                      <h3 className="text-white font-medium">{image.title}</h3>
                      <div className="flex justify-between items-center mt-2">
                        <span className="text-gray-200 text-sm">{image.date}</span>
                        <span className="px-2 py-1 bg-white/20 text-white text-xs rounded-full backdrop-blur-sm">
                          {image.category}
                        </span>
                      </div>
                    </div>
                  </motion.div>
                ))}
              </div>
              
              {/* 图片查看器 */}
              {selectedImage && (
                <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4" onClick={closeImageViewer}>
                  <div className="max-w-5xl w-full max-h-[90vh] flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
                    <button 
                      className="absolute top-6 right-6 text-white text-2xl hover:text-gray-300 transition-colors"
                      onClick={closeImageViewer}
                    >
                      <i className="fa-solid fa-times"></i>
                    </button>
                    <img 
                      src={selectedImage.largeUrl} 
                      alt={selectedImage.title} 
                      className="max-w-full max-h-[90vh] object-contain"
                    />
                    <div className="absolute bottom-6 left-0 right-0 text-center text-white p-4 bg-gradient-to-t from-black/70 to-transparent">
                      <h3 className="text-xl font-medium mb-2">{selectedImage.title}</h3>
                      <div className="flex justify-center items-center gap-4 text-sm text-gray-200">
                        <span>{selectedImage.date}</span>
                        <span>•</span>
                        <span>{selectedImage.category}</span>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </section>
     </main>
      <Footer />

    </div>
  );
}